;(function(doc){
    var oBox = document.getElementsByClassName("J_listBox")[0],
        oData = JSON.parse(document.getElementById("J_listData").innerText),
        oTpl = document.getElementById("J_listTpl").innerText,
        imgItem = document.getElementsByClassName("img");

    function init(){
        oBox.innerHTML = render(oData);

        /* 2.不加定时器光 window.scrollTo 是不会跳到上面的，因为需要在页面加载完成之后再进行滚动才会有效果*/
        setTimeout(function(){
            window.scrollTo(0,0);
        },150);

        bindEvent();
    }

    function bindEvent(){

        // window.onload = window.onscroll = function(){
        //     imgLazyLoad(imgItem)();
        // }
        /* 1. 为什么加了节流就可以，下面有说明 */
        window.onload = window.onscroll = throttle(imgLazyLoad(imgItem),500);
    }

    function render(data){
        var list = "";
         data.forEach(function(item,index){
            list += oTpl.replace(/{{(.*?)}}/g,function(node,key,tpl){
                /* node匹配的值；key坐标或（）中的值；tpl匹配的模板 */
                return{
                    img:item.img,
                    name:item.name
                }[key]
            })
        });
        return list;
    }

    init();
})(document);

function imgLazyLoad(imgs){
    var imgLen = imgs.length,
        n = 0;   /*只要页面不刷新，他就不会再是0*/

    return function(){
        var cHeight = document.documentElement.clientHeight,
            sTop = document.documentElement.scrollTop ||
                document.body.scrollTop,
            imgItem;

        /*
        因为当scroll滚动时，会立即执行多次这个for循环，第一次复制src之后就会执行removeAttribute进行删除。
        之后的几次执行getAttribute 就获取不到src，所以不显示页面图片了。
        所以我们需要使用节流。但不适合使用防抖
        * */
        for(var i=n;i<imgLen;i++){
            imgItem = imgs[i];

            if(imgItem.offsetTop < (cHeight + sTop)){
                console.log(imgItem.getAttribute("data-src"));
                imgItem.src = imgItem.getAttribute("data-src");
                imgItem.removeAttribute("data-src");
                n++;
            }
        }
    }
}

/*节流*/
function throttle(fn,time){
    var t = null,
        begin = new Date().getTime(),
        res;

    var throttled = function(){
        var _this = this,
            nowDate = new Date().getTime();

        if(t){
            clearTimeout(t);
        }

        if(nowDate - begin >= time){ //这时需要执行一次
            res = fn.apply(_this);
            begin = nowDate;
        }else{  //说明用户停止行为，我们需要最后在执行一次
            t = setTimeout(function(){
                res = fn.apply(_this);
            },time);
        }
        return res;
    };
    throttled.remove = function(){
        clearTimeout(t);
        t = null;
    };
    return throttled;
}
